<template>
  <my-navigation-bar :my-style='style' class="my-navigation">控制台</my-navigation-bar>
  <text class="icon-zuojiantou navbar" @tap="goBack" :style="flag?{marginTop: '36rpx'}:''"></text>
  <view v-if="flag">
    <view class="main-box" :style="flag?{marginTop: '180rpx'}:''">
      <view class="banner">
        <image src="../../static/image/control/17.jpg" mode=""></image>
      </view>
      <view class="button-box">
        <text class="icon-xiangji left"></text>
        <text class="icon-shipin middle"></text>
        <text class="icon-wodebaobeiye_genghuan right"></text>
      </view>
    </view>
    <view class="consumption">
      <view class="left-box">
        <text class="flow">2000.87<text class="sub">MB</text> </text>
        <text>已用流量</text>
      </view>
      <view class="right-box">
        |<text class="icon-xiangyoujiantou"></text>
      </view>
    </view>
    <view class="info-box">
      <view class="top-box">
        <view class="img-box">
          <image src="../../static/image/control/eye.png" mode=""></image>
        </view>
        <view class="desc-box">
          <text class="name">A.0G2N7 <text class="icon-zhengque"></text> </text>
          <text class="time">2023.03.08 10:10:11</text>
        </view>
      </view>
      <view class="bottom-box">
        <view class="item">
          <text class="item-name">设备ID</text>
          <text class="type">85241052</text>
        </view>
        <view class="item">
          <text class="item-name">设备集名称</text>
          <text class="type">摄像头-M784</text>
        </view>
        <view class="item">
          <text class="item-name">设备类型</text>
          <text class="type">视频监控</text>
        </view>
      </view>
    </view>
  </view>
  <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
   <scroll-view scroll-y="true" class="scroll-box">
     <view class="main-box" :style="flag?{marginTop: '180rpx'}:''">
       <view class="banner">
         <image src="../../static/image/control/17.jpg" mode=""></image>
       </view>
       <view class="button-box">
         <text class="icon-xiangji left"></text>
         <text class="icon-shipin middle"></text>
         <text class="icon-wodebaobeiye_genghuan right"></text>
       </view>
     </view>
     <view class="consumption">
       <view class="left-box">
         <text class="flow">2000.87<text class="sub">MB</text> </text>
         <text>已用流量</text>
       </view>
       <view class="right-box">
         |<text class="icon-xiangyoujiantou"></text>
       </view>
     </view>
     <view class="info-box">
       <view class="top-box">
         <view class="img-box">
           <image src="../../static/image/control/eye.png" mode=""></image>
         </view>
         <view class="desc-box">
           <text class="name">A.0G2N7 <text class="icon-zhengque"></text> </text>
           <text class="time">2023.03.08 10:10:11</text>
         </view>
       </view>
       <view class="bottom-box">
         <view class="item">
           <text class="item-name">设备ID</text>
           <text class="type">85241052</text>
         </view>
         <view class="item">
           <text class="item-name">设备集名称</text>
           <text class="type">摄像头-M784</text>
         </view>
         <view class="item">
           <text class="item-name">设备类型</text>
           <text class="type">视频监控</text>
         </view>
       </view>
     </view>
   </scroll-view>
  </view>
</template>

<script setup>
  import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {computed} from "vue";
  import useBounceFunc from "../../hooks/bounce.js";
   const {state, moveH, startH, endH} = useBounceFunc();
   const flag = computed(()=>{
     return getApp().globalData.isIphoneX;
   });
  const style = {
    textAlign: 'center',
    paddingLeft: 0
  };
  const goBack = (e) => {
    uni.navigateBack()
  }
</script>

<style scoped lang="scss">
.navbar{
  position: fixed;
  top: 63rpx;
  left: 30rpx;
  z-index: 100;
  font-size: 48rpx;
  font-weight: 500;
  color: #515151;
}
.scroll-box{
  height: 100vh;
}
  .main-box {
    margin-top: 150rpx;

    .banner {
      width: 670rpx;
      height: 330rpx;
      margin: 0 auto;

      image {
        width: 100%;
        height: 100%;
        border-radius: 30rpx;
      }
    }

    .button-box {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 10rpx;
      color: #626262;

      .left {
        font-size: 40rpx;
      }

      .middle {
        margin: 0 75rpx;
        width: 70rpx;
        height: 70rpx;
        background-color: #0D92F1;
        color: #fff;
        text-align: center;
        line-height: 70rpx;
        border-radius: 50%;
        font-size: 28rpx;
      }

      .right {
        font-size: 40rpx;
      }
    }

  }

  .consumption {
    width: 670rpx;
    height: 160rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #E5F6FF;
    border: 1px solid #aaa;
    border-radius: 30rpx;
    margin-top: 35rpx;

    .left-box {
      margin-left: 115rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      color: #3399FF;

      .flow {
        font-size: 45rpx;
        font-weight: 700;

        .sub {
          font-size: 26rpx;
          margin-left: 30rpx;
        }
      }
    }

    .right-box {
      color: #2582CD;
      font-weight: 700;
      position: relative;

      .icon-xiangyoujiantou {
        position: absolute;
        top: 7rpx;
        right: -33rpx;
        font-size: 36rpx;
      }
    }
  }

  .info-box {
    width: 670rpx;
    margin: 20rpx auto 60rpx;
    border: 1px solid #aaa;
    border-radius: 30rpx;

    .top-box {
      display: flex;
      justify-content: flex-start;
      border-bottom: 1px solid #eee;
      padding: 50rpx 0 50rpx 60rpx;

      .img-box {
        width: 150rpx;
        height: 150rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .desc-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 37rpx;

        .name {
          font-size: 37rpx;
          font-weight: 600;

          .icon-zhengque {
            font-weight: normal;
            display: inline-block;
            font-size: 40rpx;
            color: #80B7F9;
          }
        }

        .time {
          margin-top: 10rpx;
          font-size: 24rpx;
          color: #aaa;

        }
      }
    }

    .bottom-box {
      padding: 46rpx 40rpx;

      .item {
        display: flex;
        justify-content: space-between;
        font-weight: 700;

        &:not(:first-child) {
          margin-top: 45rpx;
        }

        .item-name {
          font-size: 36rpx;
        }

        .type {
          font-size: 28rpx;
          color: #999999;
        }
      }
    }
  }
</style>
